<template>
	<view class="content">
		<view class="top">
			<view class="back">
				<image src="../../static/login/back.png"></image>
			</view>
			<view class="center">好友请求</view>
		</view>
		<view class="main">
			<view class="requester" v-for="item in reqlist" :key='item.id'>
				<view class="img">
					<image :src="item.img"></image>
				</view>
				<view class="btn">
					<view class="refuse" hover-class="click" hover-stay-time="0">拒绝</view>
					<view class="agree" hover-class="click" hover-stay-time="0">同意</view>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="time">{{item.time}}</view>
				<view class="info">留言：{{item.info}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reqlist:[
					{
						id:1,
						name:'刺客567',
						img:'../../static/567.jpg',
						time:'2020-05-20',
						info:'你好，想请求加你为好友。谢谢你的通过，行吧。'
					},
					{
						id:2,
						name:'Mike',
						img:'../../static/index/1.jpg',
						time:'2020-01-23',
						info:'你好，谢谢你的通过，行吧。想请求加你为好友。'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	@import "../../common/top.scss";

	.click {
		opacity: .5;
	}

	.top {
		.back {
			height: 88rpx;
			display: flex;
			align-items: center;

			image {
				margin-left: $uni-spacing-col-base;
				width: 28rpx;
				height: 48rpx;
			}
		}

		.center {
			width: 300rpx;
			position: absolute;
			margin-top: var(--status-bar-height);
			top: 16rpx;
			left: 225rpx;
			text-align: center;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 40rpx;
		}
	}

	.main {
		margin-top: 88rpx;
		padding: 0 32rpx;

		.requester {
			position: relative;
			padding: 70rpx 20rpx 30rpx;
			margin: 150rpx 0;
			background-color: white;
			box-shadow: 0rpx 10rpx 48rpx rgba(0, 0, 0, .2);
			border-radius: 20rpx;
		}

		.img {
			position: absolute;
			top: -100rpx;
			left: 50%;
			transform: translateX(-50%);
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				box-shadow:5rpx 5rpx 20rpx rgba(0,0,0,.3);
			}
		}

		.btn {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.refuse,
			.agree {
				width: 200rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 40rpx;
			}

			.refuse {
				background-color: rgba(255, 93, 91, .1);
				color: $uni-color-warning;
			}

			.agree {
				background-color: $uni-color-primary;
			}
		}

		.name {
			margin-top: 30rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 50rpx;
			font-weight: 600;
		}

		.time {
			text-align: center;
			font-size: 32rpx;
			color: $uni-text-color-grey;
		}

		.info {
			margin-top: 40rpx;
			background: #F3F4F6;
			padding: 30rpx 25rpx;
			color: #272832;
			font-size: 35rpx;
			text-align: justify;
			border-radius: 20rpx;
		}
	}
</style>
